<template>

    

<div class="customsDeclarationInvoiceVue">



  <div class="head">

    <export-excel module-name="documentprocess_cc_customsDeclarationInvoice" file-name="报关发票.xlsx"></export-excel>

    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row>
          <el-col :span="24">
            <div>
              <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD:</p>
              <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
              <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
              <p>TEL:+86-10-50911288</p>
              <p>COMMERCIAL INVOICE</p>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="4" class="-to01">
            <p>TO:</p>
          </el-col>
          <el-col :span="8">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <el-row>
                    <input type="text" class="relate-color" @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_cdi_toName" placeholder="请输入买方">
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <input type="text" class="relate-color"   @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_cdi_toAdd" placeholder="请输入买方地址">
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <input type="text" class="relate-color"  @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_cdi_toTel" placeholder="请输入买方电话">
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4" class="-to03"></el-col>
          <el-col :span="8" class="-el-col -to04">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="12" style="text-align:left;">
                      Invoice No.:
                    </el-col>
                    <el-col :span="12">
                      <input type="text" class="relate-color"  @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_cdi_invoiceNO" placeholder="请输入内容">
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="12" style="text-align:left;">
                      Invoice Date:
                    </el-col>
                    <el-col :span="12">
                      <el-date-picker value-format="yyyy-MM-dd" :disabled="!editable"    @change="handleInviceDate"   v-model="documentprocess_cc_cdi_invoiceDate" type="date" placeholder="选择日期"></el-date-picker>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="24">
            <el-row>
              <el-col :span="4">
                <p>From:</p>
              </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" @input="handleRelateInput('documentprocess_cc_cdi_fromPort', $event)" :readonly="!editable"   v-model="documentprocess_cc_cdi_fromPort" placeholder="请输入内容">
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8" style="text-align: left;">
                Terms of Payment:
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>To:</p>
              </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" @input="handleRelateInput('documentprocess_cc_cdi_toPort', $event)" :readonly="!editable"   v-model="documentprocess_cc_cdi_toPort" placeholder="请输入内容">
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <input type="text" @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_cdi_payTerms" placeholder="请输入内容">
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>Shipment Date:</p>
              </el-col>
              <el-col :span="8">
                <el-date-picker class="shipment-date relate-color" value-format="yyyy-MM" format="yyyy/MM" :disabled="!editable"  @change="handleShipDateSelect"   type="date"  v-model="documentprocess_cc_cdi_shipDate" placeholder="请选择日期"></el-date-picker>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8" style="text-align: left;">
                Trade Term:
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>By:</p>
              </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" @input="handleRelateInput('documentprocess_cc_cdi_transport', $event)" :readonly="!editable"   v-model="documentprocess_cc_cdi_transport" placeholder="请输入内容">
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" @input="handleRelateInput('documentprocess_cc_cdi_tradeTerms', $event)" :readonly="!editable"   v-model="documentprocess_cc_cdi_tradeTerms" placeholder="请输入内容">
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-table class="tcf-table-1" :data="documentprocess_cc_cdi_table" border style="width: 100%" >
            <el-table-column type="index" label="Item" :index="indexMethod"></el-table-column>
          <el-table-column prop="documentprocess_cc_cdi_products" label="Description of Goods" >
            <template slot-scope="scope">
                <input type="text" @input="handleTableInput(scope, 'documentprocess_cc_cdi_products', $event)" 
                :readonly="!editable"  v-model="scope.row.documentprocess_cc_cdi_products" placeholder="请输入内容">
             </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_cdi_description" label="Specification&Model">
            <template slot-scope="scope">
                <input type="text" @input="handleTableInput(scope, 'documentprocess_cc_cdi_description', $event)" 
                :readonly="!editable"  v-model="scope.row.documentprocess_cc_cdi_description" placeholder="请输入内容">
             </template>
          </el-table-column>
          <el-table-column  prop="documentprocess_cc_cdi_quantity" label="Quantity(PCS)">
            <template slot-scope="scope">
                <input type="number" @input="handleTableInput(scope, 'documentprocess_cc_cdi_quantity', $event)" 
                :readonly="!editable"  v-model="scope.row.documentprocess_cc_cdi_quantity" placeholder="请输入内容">
             </template>
          </el-table-column>
          <el-table-column  label="Unit Price" :render-header="currencySel('Unit Price')">
               <el-table-column prop="documentprocess_cc_cdi_price"  :render-header="currentSelEN('')">
                <template slot-scope="scope">
                    <input type="number" @input="handleTableInput(scope, 'documentprocess_cc_cdi_price', $event)" 
                    :readonly="!editable"  v-model="scope.row.documentprocess_cc_cdi_price" placeholder="请输入内容">
                </template>
               </el-table-column>
          </el-table-column>
          <el-table-column  label="Amount">
           <el-table-column prop="documentprocess_cc_cdi_lineAmount" :render-header="currentSelEN('')">
            <template slot-scope="scope">
                    <input type="number" @input="handleTableInput(scope, 'documentprocess_cc_cdi_lineAmount', $event)" 
                    :readonly="!editable"  v-model="scope.row.documentprocess_cc_cdi_lineAmount" placeholder="请输入内容">
            </template>
          </el-table-column>
          </el-table-column>

          <el-table-column
          v-if="editable"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="addNewLine(scope.$index, documentprocess_cc_cdi_table)" type="text" size="small">添加</el-button>
            <el-button @click="removeCurrentLine(scope.$index, documentprocess_cc_cdi_table)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
        </el-table>

       <div class="extra-table">
          <el-row class="extra-money">
              <el-col  style="width:39.2%;" ><div>合计TOTAL</div></el-col>
              <el-col style="width: 17%;">
                <input type="number" :min="0" v-model="documentprocess_cc_cdi_table_number" @input="handleSimpleInput"/>
              </el-col>
              <el-col style="width: 16%;" ></el-col>
              <el-col style="width: 16%;">
                <input type="number" :min="0" v-model="documentprocess_cc_cdi_table_amount" @input="handleRelateInput('documentprocess_cc_cdi_table_amount', $event)"/>
              </el-col>
          </el-row>
       </div>

        <el-row class="-footer">
          <el-col :span="24" class="-footer">
            <div>
              <div class="-footer-top">
                Origin of China
              </div>
              <p>Bank details for payment:</p>
              <p>Beneficiary Company：Tian Jin Financial Trade Link Import and Export Co.,Ltd</p>
              <p>Beneficiary A/C Bank：CHINA ZHESHANG BANK BEIJING BRANCH</p>
              <p>Bank Address: NO.1 FINANCIAL STEREET,XICHENG DISTRICT,BEIJING,CHINA</p>
              <p>SWIFT CODE：ZJCBCN2N</p>
              <p class="-footer-bottom">TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>



    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles">
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles" :key="index">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>


</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';
import { handleEmit } from '../common.js';

import exportExcel from '../../../common/exportExcel.vue';

export default {
  created() {

    this.keys.forEach(key => {
      this[key] = _.cloneDeep(this.datas[key]);
    });



  },
  mounted() {
      let self = this;
    
      this.bus.$on('bind-new-ftc', function(ftcData){

        //关联绑定的外贸合同
        self.documentprocess_cc_cdi_toName = ftcData.bf_buy_name;
        self.documentprocess_cc_cdi_toAdd = ftcData.bf_buy_address;
        self.documentprocess_cc_cdi_toTel = ftcData.bf_buy_tel;
        self.documentprocess_cc_cdi_invoiceNO = ftcData.bf_orderNumber;
        self.documentprocess_cc_cdi_fromPort = ftcData.bf_portOfLoad;
        self.documentprocess_cc_cdi_toPort = ftcData.bf_portOfDestination;
        self.documentprocess_cc_cdi_transport = ftcData.bf_shipment;
        self.documentprocess_cc_cdi_tradeTerms = ftcData.bf_tradeTerm;
        self.documentprocess_cc_cdi_currencyValue = ftcData.bf_currencyValue;


        let table = [], descStr = [];
        for(let i = 0; i < ftcData.bf_table1.length; i++){
          let obj = {
            documentprocess_cc_cdi_products : (ftcData.bf_table1[i]).bf_table1_product,
            documentprocess_cc_cdi_description: (ftcData.bf_table1[i]).bf_table1_description,
            documentprocess_cc_cdi_quantity:  parseInt((ftcData.bf_table1[i]).bf_table1_quantity),
            documentprocess_cc_cdi_price: toFixed((ftcData.bf_table1[i]).bf_table1_price, 2),
            documentprocess_cc_cdi_lineAmount: 0
          };
          descStr.push(obj.documentprocess_cc_cdi_products);

          let temp = Number(obj.documentprocess_cc_cdi_quantity) * Number(obj.documentprocess_cc_cdi_price);
          obj.documentprocess_cc_cdi_lineAmount = toFixed(self.handleIsNaN(temp));
          table.push(obj);
        }
        self.documentprocess_cc_cdi_table = table;
        self.documentprocess_cc_cdi_table_number = self.computeTableTotal('number');
        self.documentprocess_cc_cdi_table_amount = self.computeTableTotal('amount');


    
        handleEmit(null, ()=> {

          self.emitToParent();

          //通知报关单，transport 
          self.emitToNext("documentprocess_cc_declarationForm-transport", self.documentprocess_cc_cdi_transport);
          //通知报关单 to
          self.emitToNext("documentprocess_cc_declarationForm-tradeCountry", self.documentprocess_cc_cdi_toPort);
          
          //通知 报关单，改变了所有的表格
          self.emitToNext("documentprocess_cc_declarationForm-table-all", table);

          //将商品的名称 空格拼成的 字符串 通知报关 合同 
          self.emitToNext("documentprocess_cc_customsDeclarationContract-description", descStr.join(' '));
          
          //将 trade terms 通知报关合同
          self.emitToNext("documentprocess_cc_customsDeclarationContract-tradeterms", self.documentprocess_cc_cdi_tradeTerms);

          //通知报关单
          self.emitToNext("documentprocess_cc_declarationForm-tradeterms", self.documentprocess_cc_cdi_tradeTerms);

          // from port 通知报关合同
          self.emitToNext("documentprocess_cc_customsDeclarationContract-loadport", self.documentprocess_cc_cdi_fromPort);

          // dest port 通知报关合同
          self.emitToNext("documentprocess_cc_customsDeclarationContract-destport", self.documentprocess_cc_cdi_toPort);

          //将商品的 amount 通知报关 合同 
          self.emitToNext("documentprocess_cc_customsDeclarationContract-amount", self.documentprocess_cc_cdi_table_amount);
          
        });
    });

    this.bus.$on("documentprocess_cc_customsDeclarationInvoice-shipdate", function(arg){
      self.documentprocess_cc_cdi_shipDate = arg[0];
      self.emitToParent();

      self.emitToNext("documentprocess_cc_customsDeclarationContract-shipdate", arg[0]);
    });
  },
  updated(){
  },

  methods: {

    /**
     * 更新数据到单证员报关
     */
    emitToParent(){
      let obj = {};
      this.keys.forEach(key => {
        obj[key] = this[key];
      });

      this.$emit("fromCI", "documentprocess_cc_customsDeclarationInvoice", obj);
    },

    /**
     * 将对应的数据传递给下一个组件
     * @param {String} eventName  事件名称
     * @param {Array} arg   传递的参数
    */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },

    editTitleUP(event){
      this.documentprocess_cc_cdi_titleUP = event.target.value;
    },

    editTitleAm(event){
      this.documentprocess_cc_cdi_titleAm = event.target.value;
    },

    /**
     * 处理NaN的数据
     */
    handleIsNaN(value){
      if (Number.isNaN(value)){
        return 0;
      } else {
        return value;
      }
    },

    /**
     * 计算表格的数量，金额的和
     * @param {String} type
     */
    computeTableTotal(type){
      if (type === 'number'){
        let num = 0;
        this.documentprocess_cc_cdi_table.forEach(line => {
          num += Number(line.documentprocess_cc_cdi_quantity);
        });
        return this.handleIsNaN(num);

      } else if (type === 'amount'){
        let amount = 0;
        this.documentprocess_cc_cdi_table.forEach(line => {
          amount += Number(line.documentprocess_cc_cdi_lineAmount);
        });
        return toFixed(this.handleIsNaN(amount));
      }
    },


    indexMethod(value){
      let lines = this.documentprocess_cc_cdi_table.length;
      return value + 1;
    },

    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    selectFiles(event) {
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });
        self.emitToParent();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          self.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

    addNewLine(currentIndex, table){
      let lastLine = _.cloneDeep(table[currentIndex]), newLine = {};
      let keys = [
          "documentprocess_cc_cdi_products",
          "documentprocess_cc_cdi_description",
          "documentprocess_cc_cdi_quantity",
          "documentprocess_cc_cdi_price",
          "documentprocess_cc_cdi_lineAmount"
      ];

      keys.forEach(key => {
        newLine[key] = lastLine[key];
      });
      table.splice(currentIndex + 1, 0, newLine);
      this.documentprocess_cc_cdi_table_number = this.computeTableTotal("number");
      this.documentprocess_cc_cdi_table_amount = this.computeTableTotal("amount");

      let descStr = [];
      table.forEach(line => {
        descStr.push(line.documentprocess_cc_cdi_products);
      });

      handleEmit(null, ()=> {
        this.emitToParent();
        //通知报关单
        this.emitToNext("documentprocess_cc_declarationForm-table", "add", currentIndex, newLine);

         //将商品的名称 空格拼成的 字符串 通知报关 合同 
        this.emitToNext("documentprocess_cc_customsDeclarationContract-description", descStr.join(' '));

        //将商品的 amount 通知报关 合同 
        this.emitToNext("documentprocess_cc_customsDeclarationContract-amount", this.documentprocess_cc_cdi_table_amount);
        
      });
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);

        this.documentprocess_cc_cdi_table_amount = this.computeTableTotal("amount");

        let descStr = [];
        table.forEach(line => {
          descStr.push(line.documentprocess_cc_cdi_products);
        });

        handleEmit(null, () => {
          this.emitToParent();
          //通知报关单
          this.emitToNext("documentprocess_cc_declarationForm-table", "delete", currentIndex);

          //将商品的名称 空格拼成的 字符串 通知报关 合同 
          this.emitToNext("documentprocess_cc_customsDeclarationContract-description", descStr.join(' '));

          //将商品的 amount 通知报关 合同 
          this.emitToNext("documentprocess_cc_customsDeclarationContract-amount", this.documentprocess_cc_cdi_table_amount);

        });
      }
    },

    /**
     * 处理基本的输入
     */
    handleSimpleInput(){
      this.emitToParent();
    },

    /**
     * 处理基本的下拉选择
     */
    handleSimpleSelect(value){
      this.emitToParent();
    },


    handleShipDateSelect(value){
      //通知 报关合同
      this.emitToNext("documentprocess_cc_customsDeclarationContract-shipdate", this.documentprocess_cc_cdi_shipDate);

      this.emitToParent();
    },

    /**
     * 处理有关联的数据
     */
    handleRelateInput(key, event){
      if (key === 'documentprocess_cc_cdi_table_amount'){
        //通知 报关合同
         this.emitToNext("documentprocess_cc_customsDeclarationContract-amount", this.documentprocess_cc_cdi_table_amount);
         
      } else if (key === 'documentprocess_cc_cdi_tradeTerms'){
         //通知 报关合同
         this.emitToNext("documentprocess_cc_customsDeclarationContract-tradeterms", this.documentprocess_cc_cdi_tradeTerms);

         //通知报关单
         this.emitToNext("documentprocess_cc_declarationForm-tradeterms", this.documentprocess_cc_cdi_tradeTerms);

      } else if (key === 'documentprocess_cc_cdi_fromPort'){
        //通知 报关合同
         this.emitToNext("documentprocess_cc_customsDeclarationContract-loadport", this.documentprocess_cc_cdi_fromPort);
         
      } else if (key === 'documentprocess_cc_cdi_toPort'){
        //通知 报关合同
         this.emitToNext("documentprocess_cc_customsDeclarationContract-destport", this.documentprocess_cc_cdi_toPort);
         
         //通知报关单
        this.emitToNext("documentprocess_cc_declarationForm-tradeCountry", this.documentprocess_cc_cdi_toPort);

      } else if (key === 'documentprocess_cc_cdi_transport') {
        //通知报关单
        this.emitToNext("documentprocess_cc_declarationForm-transport", this.documentprocess_cc_cdi_transport);
      } 

      this.emitToParent();
    },



    handleInviceDate(value){
        //通知 报关合同
        this.emitToNext("documentprocess_cc_customsDeclarationContract-invoiceDate", value);
        this.emitToParent();
    },

    /**
     * 处理表格的输入框
     */
    handleTableInput(scope, key, event){
      let oldData = _.cloneDeep(this.documentprocess_cc_cdi_table[scope.$index]), temp = 0;

      switch(key) {
          case 'documentprocess_cc_cdi_price':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
              oldData[key] =  event.target.value;
            } else {
              oldData[key] =  toFixed(event.target.value);
            }

            temp = Number(oldData.documentprocess_cc_cdi_price) * Number(oldData.documentprocess_cc_cdi_quantity);
            temp = toFixed(this.handleIsNaN(temp));
            oldData.documentprocess_cc_cdi_lineAmount = temp;
            this.documentprocess_cc_cdi_table.splice(scope.$index, 1, oldData);
            this.documentprocess_cc_cdi_table_amount = this.computeTableTotal("amount");

            //将商品的 amount 通知报关 合同 
            this.emitToNext("documentprocess_cc_customsDeclarationContract-amount", this.documentprocess_cc_cdi_table_amount);
            break;

          case 'documentprocess_cc_cdi_quantity':
            oldData[key] =  Number.isNaN(parseInt(event.target.value).toString()) ? '0' : parseInt(event.target.value).toString();
            temp = Number(oldData.documentprocess_cc_cdi_price) * Number(oldData.documentprocess_cc_cdi_quantity);
            temp = toFixed(this.handleIsNaN(temp));
            oldData.documentprocess_cc_cdi_lineAmount =  temp;
            this.documentprocess_cc_cdi_table.splice(scope.$index, 1, oldData);
            this.documentprocess_cc_cdi_table_number = this.computeTableTotal("number");
            this.documentprocess_cc_cdi_table_amount = this.computeTableTotal("amount");

            //将商品的 amount 通知报关 合同 
            this.emitToNext("documentprocess_cc_customsDeclarationContract-amount", this.documentprocess_cc_cdi_table_amount);
            break;
          
          case 'documentprocess_cc_cdi_lineAmount': 
            this.documentprocess_cc_cdi_table_amount = this.computeTableTotal("amount");
            //将商品的 amount 通知报关 合同 
            this.emitToNext("documentprocess_cc_customsDeclarationContract-amount", this.documentprocess_cc_cdi_table_amount);
            break;
          
          case 'documentprocess_cc_cdi_products': 
            let descStr = [];
            this.documentprocess_cc_cdi_table.forEach(line => {
              descStr.push(line.documentprocess_cc_cdi_products);
            });

            //通知报关合同
            this.emitToNext("documentprocess_cc_customsDeclarationContract-description", descStr.join(' '));

            break;
      }

      handleEmit(null, () => {
        this.emitToParent();
        //通知报关单
        this.emitToNext("documentprocess_cc_declarationForm-table-line",scope.$index, key, event.target.value);
      });
    },

    /**选择币种 */
    currencySel(name){
        return (h, {column, $index}) => {
        let self = this;
        var selAttr = {};
        if (!this.editable){
          selAttr.disabled = 'disabled';
        }
        return  h("div", {
          attrs: {
            class: "select-currency"
          }
        }, [
          h("span", name),
          h("select", {
            attrs: {...selAttr},
            domProps: {
            value: self.documentprocess_cc_cdi_currencyValue
          },
          on: {
            change: function(event){
              self.documentprocess_cc_cdi_currencyValue = event.target.value;
              self.emitToParent();
            }
          }
          },[
            h("option", {
              attrs: {selected: true}
            }, "人民币"),
            h("option", "美元"),
            h("option", "加元"),
            h("option", "欧元"),
          ])
        ]);
      }
    },
    currentSelEN(name){
      return (h, {column, $index}) => {
        let temp = 'RMB';
        switch (this.documentprocess_cc_cdi_currencyValue){
          case '人民币':
          temp = 'RMB';
          break;
          case '美元':
          temp = 'USD';
          break;
          case '欧元':
          temp = 'EUR';
          break;
          case '加元':
          temp = 'CAD';
          break;
        }
        return h('div',null, `${temp}`);
      }
    },
  },
  data() {
    return {
      id: '',
      formInstId: '',
      attachedFiles: [], //附件
      documentprocess_cc_cdi_toName: '', //买方
      documentprocess_cc_cdi_toAdd: '', //买方地址
      documentprocess_cc_cdi_toTel: '', //买方电话
      documentprocess_cc_cdi_invoiceNO: '', //发票编号
      documentprocess_cc_cdi_invoiceDate: '', //发票日期
      documentprocess_cc_cdi_fromPort: '', //出发港
      documentprocess_cc_cdi_toPort: '', //目的港
      documentprocess_cc_cdi_shipDate: '', //装期
      documentprocess_cc_cdi_transport: '', //运输方式
      documentprocess_cc_cdi_payTerms: 'BY T/T', //付款方式
      documentprocess_cc_cdi_tradeTerms: '', //交易方式
      documentprocess_cc_cdi_currencyValue: '人民币', //币种

      documentprocess_cc_cdi_titleUP: 'Unit Price(USD)',
      documentprocess_cc_cdi_titleAm: 'Amount(USD)',

      documentprocess_cc_cdi_table_number: '', //数量和
      documentprocess_cc_cdi_table_amount: '', //金额总和

      documentprocess_cc_cdi_table: [
        {
          documentprocess_cc_cdi_products: '',
          documentprocess_cc_cdi_description: '',
          documentprocess_cc_cdi_quantity: '',
          documentprocess_cc_cdi_price: '',
          documentprocess_cc_cdi_lineAmount: ''
        }
      ],

      keys: [
        "id",
        "formInstId",
        "attachedFiles",
        "documentprocess_cc_cdi_toName",
        "documentprocess_cc_cdi_toAdd",
        "documentprocess_cc_cdi_toTel",
        "documentprocess_cc_cdi_invoiceNO",
        "documentprocess_cc_cdi_invoiceDate",
        "documentprocess_cc_cdi_fromPort",
        "documentprocess_cc_cdi_toPort",
        "documentprocess_cc_cdi_shipDate",
        "documentprocess_cc_cdi_transport",
        "documentprocess_cc_cdi_payTerms",
        "documentprocess_cc_cdi_tradeTerms",
        "documentprocess_cc_cdi_currencyValue",
        "documentprocess_cc_cdi_titleUP",
        "documentprocess_cc_cdi_titleAm",
        "documentprocess_cc_cdi_table_number",
        "documentprocess_cc_cdi_table_amount",
        "documentprocess_cc_cdi_table"
      ]
    }
  },
  watch: {
    datas(newValue, oldValue){
      this.keys.forEach(key => {
        this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },
  props: {
    datas: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  components: {
    exportExcel
  }
}
</script>

<style lang="scss">
.customsDeclarationInvoiceVue {

    .relate-color {
      // background-color: #efa54b36 !important;

      input {
        background-color: transparent !important;
      }
    }

    .select-currency {
      select {
        margin-left: 12px;
        height: 30px;
        width: 60px;
      }
    }


    .shipment-date {
      position: relative;
      float: left;
      margin-left: 20px;
    }



    padding: 20px;
    border: 1px solid #999;

    font-size: 15px;
    line-height: 30px;

    p {
      padding: 5px 0;

      span {
        font-weight: bolder;
      }
    }

    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }

    #title-up, #title-am{
      color: #878d99;
      border: none;
      background-color: rgb(230,230,230);
      height: 30px;
      text-align: center;
    }

          .el-input-number__decrease,
          .el-input-number__increase {
            width: 20px;

            border: none !important;
            background: transparent;
          }

          .el-input-number {
              width: 100px;
              min-width: 100px;
          }

    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;
            .export {
                float: right;
            }
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
            h2 {
                text-align: center;
                padding: 10px 0;
            }

            .el-input-number {
              width: 100%;
            }
            
            .el-table__body-wrapper {
              overflow: hidden;
            }


            input {
              outline: none;
              background-color: transparent;
              border: 1px solid #e6ebf5;
              width: 90%;
              height: 32px;
            }

            .el-date-editor {
                input {
                  width: 100%;
                }
            }

            .tcf-table-1 {
              input {
                border: none;
              }
            }
            

            td {

              border: 1px solid #e6ebf5;
              .el-input__inner {
                background: transparent;
                padding: 0;
              }
            }

            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #999;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #999;
                    border-left: 1px solid #999;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #999;
                    padding: 5px;
                }


              .extra-table, {
                font-size: 14px;
                .extra-money {
                    border: 1px solid #e6ebf5;
                    border-top: none;
                    text-align: center;
                    color: #5a5e66;

                    .el-col {
                      height: 40px;
                      line-height: 40px;
                      border: none !important;

                      &:nth-child(1),
                      &:nth-child(2),
                      &:nth-child(3),{
                        border:none;
                        border-right: 1px solid #e6ebf5 !important;
                      }
                    }

                    input {
                      width: 90%;
                      height: 36px;
                      border: none;
                      outline: none;
                      text-indent: 1em;
                      color: #5a5e66;
                    }
                  }
                }
                  }
            .-to01,
            .-to03,
            .-to04 {
                height: 133px;
            }
            .-to04 {
                border-right: 1px solid #999 !important;
            }
            .-to02 {
                ul {
                    li {
                        margin-bottom: 1px;
                    }
                }
            }
            .-from {
                .el-col-24 {
                    padding: 0;
                    .el-row {
                        border: none;
                    }
                }
                .el-col-4,
                .el-col-8 {
                    border-right: none;
                }
            }
            .-footer {
                width: 100%;
                text-align: left !important;
                border: none !important;
                .-footer-top {
                    text-align: right !important;
                }
                .-footer-bottom {
                    text-align: center;
                }
            }
            .el-table {
                margin-top: 20px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;

                .el-date-editor{
                  width: 100%;
                }
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .upload {
            margin-top: 20px;
            padding: 0;
            > div {
                border: 1px solid #999;
                padding: 20px 0 40px 20px;
            }

            .upload-btn {
                position: relative;
                > input {
                    opacity: 0;
                    width: 100px;
                    height: 40px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            .upload-files {

                > li {
                    width: 300px;
                    padding: 10px 0;
                    transition: all 0.5s linear;

                    &:hover {

                      >span {
                        color: #409EFF;
                      }
                    }
                  }

                font-size: 16px;
                span {
                    padding: 0 10px;
                    cursor: pointer;
                    display: inline;
                }
                span.el-icon-close:hover {
                    cursor: pointer;
                }
            }
            .upload-hint {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }

    }

}
</style>
